let faceapiReady = false;
let url = window.location.href;
var canvas;
var video = document.getElementById('v');
var displaySize = { width: video.width, height: video.height };
let dir = 'https://static.insta360.com/face/model';
video.addEventListener('play', () => {
    console.log('play lisetner')
    canvas = faceapi.createCanvasFromMedia(video);
    document.body.append(canvas);
    faceapi.matchDimensions(canvas, displaySize);
    takePhoto();
    setInterval(takePhoto, 100);
});

startVideo();

Promise.all([
    faceapi.nets.ssdMobilenetv1.loadFromUri(dir),
    // faceapi.nets.tinyFaceDetector.loadFromUri(dir),
    faceapi.nets.faceLandmark68Net.loadFromUri(dir),
    // faceapi.nets.faceRecognitionNet.loadFromUri(dir),
    // faceapi.nets.faceExpressionNet.loadFromUri(dir)
]).then(setFaceapiReady);


function setFaceapiReady() {
    console.log("faceapi ready")
    faceapiReady = true;
    startTime = new Date().getTime();
}

async function startVideo() {
    console.log("start video");
    // 老的浏览器可能根本没有实现 mediaDevices，所以我们可以先设置一个空的对象
    if (navigator.mediaDevices === undefined) {
        navigator.mediaDevices = {};
    }
    if (navigator.mediaDevices.getUserMedia === undefined) {
        navigator.mediaDevices.getUserMedia = function (constraints) {
            // 首先，如果有getUserMedia的话，就获得它
            var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;

            // 一些浏览器根本没实现它 - 那么就返回一个error到promise的reject来保持一个统一的接口
            if (!getUserMedia) {
                return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
            }

            // 否则，为老的navigator.getUserMedia方法包裹一个Promise
            return new Promise(function (resolve, reject) {
                getUserMedia.call(navigator, constraints, resolve, reject);
            });
        }
    }
    const constraints = {
        video: true,
        audio: false
    };
    let promise = navigator.mediaDevices.getUserMedia(constraints);
    promise.then(stream => {
        let v = document.getElementById('v');
        // 旧的浏览器可能没有srcObject
        if ("srcObject" in v) {
            v.srcObject = stream;
        } else {
            // 防止再新的浏览器里使用它，应为它已经不再支持了
            v.src = window.URL.createObjectURL(stream);
        }
        v.onloadedmetadata = function (e) {
            v.play();
        };
    }).catch(err => {
        console.error(err.name + ": " + err.message);
    })
}


async function detect() {
    // const options = new faceapi.TinyFaceDetectorOptions({ scoreThreshold: 0.2, inputSize: 608 });
    const options = new faceapi.SsdMobilenetv1Options({ minConfidence: 0.5, maxResults: 3 });
    const detections = await faceapi.detectAllFaces(video, options).withFaceLandmarks();
    return detections;
}

function draw(detections) {
    const resizedDetections = faceapi.resizeResults(detections, displaySize);
    canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height);
    faceapi.draw.drawDetections(canvas, resizedDetections);
    faceapi.draw.drawFaceLandmarks(canvas, resizedDetections);
}

async function takePhoto() {
    if (!faceapiReady) {
        return;
    }
    let detections = await detect();
    draw(detections);
}